<template>
  <div class="subject">
    <!-- 题库列表 -->
    <div class="subject_topics">
      <div class="subject_topic">
        <span class="subject_select">题目筛选</span>
        <span class="degree">
          <el-select v-model="value" placeholder="难度">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <span class="subject_search">
          <el-input placeholder="输入名称..." v-model="search">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handlerSearchClick()"
            ></el-button>
          </el-input>
        </span>
        <span class="subject_random">
          <el-button>随机一题</el-button>
        </span>
      </div>
      <div>
        <el-table
          :data="
            subjectList.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          style="width: 100%"
          border
          @row-click="subjectDetail"
        >
          <el-table-column
            prop="userSubjectStatus"
            label="状态"
            min-width="3%"
          ></el-table-column>
          <el-table-column prop="subjectName" label="题目" min-width="6%">
          </el-table-column>
          <el-table-column prop="subjectType" label="类别" min-width="5%">
          </el-table-column>
          <el-table-column prop="submitNumber" label="提交数" min-width="5%">
          </el-table-column>
          <el-table-column prop="subjectClass" label="难度" min-width="5%">
          </el-table-column>
        </el-table>
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="subjectList.length"
        >
        </el-pagination>
      </div>
    </div>
    <div class="discuss_related">
      <div class="discuss_s">
        <p>我的浏览</p>
        <span><img src="" />排序算法</span>
        <span><img src="" />排序算法</span>
        <span><img src="" />排序算法</span>
      </div>
      <div class="discuss_x">
        <p>最热题组</p>
        <span><img src="" />排序算法</span>
        <span><img src="" />排序算法</span>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/subjectList.css";
const defaultSubject = [
  {
    id: 1,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 2,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 3,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 1,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 2,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 3,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 1,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 2,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 3,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 1,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 2,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 3,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 1,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 2,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 3,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 1,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 2,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  {
    id: 3,
    subjectName: "两数之和",
    subjectType: "数组",
    userSubjectStatus: 1,
    sumbitNumber: 100,
    subjectClass: 1,
    subjectContext:
      "给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。",
    createTime: "2022-02-19 23:01:51",
    updateTime: "2022-02-19 23:01:54",
    subjectStatus: 1,
    subjectTag: "java",
    subjectNumber: 100,
    subjectExample:
      "输入：nums = [2,7,11,15], target = 9,输出：[0,1],解释：因为 nums[0] + nums[1] !!输入：nums = [3,2,4], target = 6,输出：[1,2]",
  },
  
];

export default {
  name: "subjectList",
  data() {
    return {
      subjectList: [],
      currentPage: 1,
      pageSize: 10,
      search: null,
      options: [
        {
          value: "选项1",
          label: "简单",
        },
        {
          value: "选项2",
          label: "中等",
        },
        {
          value: "选项3",
          label: "困难",
        },
      ],
      value: "",
    };
  },
  created() {
    this.getSubjectList();
  },
  methods: {
    getSubjectList() {
      //
      this.subjectList = defaultSubject;
      //   this.$router.push({path: '/subjectHome',query:{id:1}})
    },
    subjectDetail(row, event, column) {
      this.$router.push({
        path: "/subject",
        query: { subject_id: row.id },
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    handlerSearchClick() {
      console.log();
    },
  },
};
</script>

<style></style>
